<template>
	<!-- 自定义导航菜单栏 -->
	<!-- //微信小程序 ：style="[]" 要用数组的形式 -->
		<view class="custom-navigation-bar" :style="[customPage.nav]">
			<view class="navigation-icon-left" @tap.stop="OnBack">
				<view class="iconfontview">
					<view class="iconfont m-home" v-if="ISNEEDGOHOME"></view>
					<view class="iconfont m-arrowleft" v-else></view>
				</view>
			</view>
			<view class="navigation-title" >{{title}}</view>
			<view class="navigation-icon-right">
			</view>
		</view>
	
</template>

<script>
	import Adpation from '@/library/platform/Adpation.js';
	export default {
		mixins: [Adpation],
		props:{
			'title':{
				type:String,
				required:true,
				default:""
			}
		},
		data() {
			return {
				ISSUBMIT:false,
				ISNEEDGOHOME:false,
			}
		},
	
		created() {
		   this.GetConfig();
		},
		
		methods: {
			GetConfig(){
				const pages = getCurrentPages();
				if (pages.length === 1) {
					this.ISNEEDGOHOME = true;
				} else {
					this.ISNEEDGOHOME = false;
				}
			},
			OnBack() {
				if (this.ISSUBMIT) return;
				this.ISSUBMIT = true;
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.reLaunch({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
				this.ISSUBMIT = false;
			}
			
		}
	}
</script>

<style >
	/* 自定义导航栏 */
	.custom-navigation-bar {
		top: 0;
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		overflow: hidden;
		transition-property: all;
		z-index: 99;
		display: flex;
		justify-content:space-between;
		box-sizing: border-box;
		user-select: none;
		background-color: var(--nav-bg);
	    padding-left:calc(var(--page-left) + 16rpx) !important;
		padding-right:calc(var(--page-right) + 16rpx) !important;
	}
	

	
	.navigation-title {
		min-width: 0;
		font-size: 16px;
		line-height: 30px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: var(--nav-color);
		align-self: center;
	
	}
	.navigation-icon-left{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left:calc(var(--page-left) + 10rpx) !important;
		width: 50rpx;
		height: 50rpx;
		align-self: center;
		background-color: transparent;
	}
	.navigation-icon-right{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right:calc(var(--page-right) + 10rpx) !important;
		width: 50rpx;
		height: 50rpx;
		align-self: center;
		background-color: transparent;
	}
</style>